/**
 * @description  收益性表现（收益率明细）
 * @author shenhong
 */
import React, { PureComponent } from 'react';
import { connect } from 'dva';
import { Col, Row, Divider, Spin } from 'antd';
import { SecondHeaderC } from '../../../comps';
import style from './index.less';

class Info extends PureComponent {
  constructor() {
    super();
    this.state = {
      dataSource2: [],
    };
  }
  componentDidMount() {
    const { dispatch, args } = this.props;
    dispatch({
      type: 'TransactionMonitoringM/getAccount',
      payload: args,
    });
  }
  UNSAFE_componentWillReceiveProps(nextProps) {
    const { args, timeStamp } = nextProps;
    if (JSON.stringify(args) !== JSON.stringify(this.props.args) || timeStamp !== this.props.timeStamp) {
      const { dispatch } = this.props;
      dispatch({
        type: 'TransactionMonitoringM/save',
        payload: { accountData: { account: null, accountMoney: null } },
      });
      dispatch({
        type: 'TransactionMonitoringM/getAccount',
        payload: args,
      });
    }
  }

  changeData = (num) => {
    const text = num.toFixed(4).replace(/(\d)(?=(\d{3})+\.)/g, '$1,');
    return text;
  };

  render() {
    const {
      TransactionMonitoringM: { accountData },
      loading,
    } = this.props;
    const account = accountData.account;
    const accountMoney = accountData.accountMoney && accountData.accountMoney !== null ? this.changeData(accountData.accountMoney) : '--';
    return (
      <div className={style.body_area}>
        <SecondHeaderC title='累计交易数值' />
        <Spin spinning={loading.effects['TransactionMonitoringM/getAccount'] == true}>
          <div className='textArea'>
            <Row type='flex' justify='center'>
              <Col span={11}>
                <span>{`累计交易笔数：${account !== null ? account : '--'}`}</span>
              </Col>
              <Col span={2}>
                <Divider type='vertical' style={{ height: '27px', marginBottom: '3px' }} />
              </Col>
              <Col span={11}>
                <span>{`累计交易金额：${accountMoney}`}</span>
              </Col>
            </Row>
          </div>
        </Spin>
      </div>
    );
  }
}
export default connect(({ TransactionMonitoringM, loading }) => ({
  TransactionMonitoringM,
  loading,
}))(Info);
